<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>创建店铺</title>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../assets/css/colorbox.min.css"/>
    <link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="../../assets/css/login/member.css">
    <link rel="stylesheet" href="../../assets/css/manager.css">
</head>
<body>
<div class="head">
    <div class="header">
        <div class="header-cnt fn-clear">
            <h1 class="logo">
                <a href="" class="logo-img logo-img-jx" title="激想云商零售管理">
                    激想云商零售管理
                </a>
            </h1>
            <h2 class="logo-title">
                创建店铺
            </h2>
            <ul class="jx-nav">
                <li class="nav-first">
                    <a href="../index.html">注册</a>
                </li>
                <li class="nav-last">
                    <a href="../index.html" target="_blank" seed="nav-link-advice">前往登录</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container">
    <div class="content">
        <div class="maincenter maincenter-box">
            <div id="fuelux-wizard-container">
                <div class="steps-container" style="padding-bottom: 30px">
                    <ul class="steps">
                        <li data-step="1" class="active">
                            <span class="step">1</span>
                            <span class="title">填写店铺信息</span>
                        </li>

                        <li data-step="2">
                            <span class="step">2</span>
                            <span class="title">企业实名认证</span>
                        </li>

                        <li data-step="3">
                            <span class="step">3</span>
                            <span class="title">实名审核通过</span>
                        </li>
                        <li data-step="3">
                            <span class="step">3</span>
                            <span class="title">开店成功</span>
                        </li>

                    </ul>
                </div>
                <div class=" step-content pos-rel">
                    <div class="step-pane active" data-step="1">
                        <div class="maincenter-box-tip dashed">
                            <p class="ui-tiptext ui-tiptext-message">店铺信息</p>
                        </div>
                        <form class="form-horizontal ui-form" id="shopInfo">
                            <div class="ui-form-item">
                                <label class="ui-label">店铺名称</label>
                                <input id="shopId" name="shopId" class="ui-input" type="text" placeholder=""
                                       value="" autocomplete="off">
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                            <div class="ui-form-item">
                                <label class="ui-label">店铺图片</label>
                                <input type="file" name="shopImg" id="shopImg" class="hidden">
                                <a href="#" class="btn-upload">
                                    <span>添加</span>
                                    <img src="" width="100" height="100">
                                </a>
                                <div class="ui-form-explain-not-input"><i class="fa fa-times-circle ui-form-icon"
                                                                          aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                            <div class="ui-form-item ">
                                <label class="ui-label">店铺地址</label>
                                <div class="distpicker" id="distpicker1">
                                    <select id="selProvince" name="province" required class="input-small"></select>
                                    <select id="selCity" name="city" required class="input-small"></select>
                                    <select id="selDistrict" name="district" required class="input-small"></select>
                                </div>
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="ui-form-item ">
                                <label class="ui-label">店铺地址</label>
                                <textarea class="form-control input-large" name="address" id="" cols="10"
                                          rows="4"></textarea>
                                <div class="ui-form-explain-not-input"><i class="fa fa-times-circle ui-form-icon"
                                                                          aria-hidden="true"></i>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="step-pane" data-step="2">
                        <div class="maincenter-box-tip dashed">
                            <p class="ui-tiptext ui-tiptext-message">企业信息
                                <span class="ft-12 grey" style="font-weight: 400">填写内容与营业执照内容保持一致</span></p>
                        </div>
                        <form class="form-horizontal ui-form" id="authentication">
                            <div class="ui-form-item">
                                <label class="ui-label">企业名称</label>
                                <input id="enterpriseName" name="enterpriseName" class="ui-input" type="text"
                                       placeholder=""
                                       value="" autocomplete="off">
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                            <div class="ui-form-item">
                                <label class="ui-label">社会信用代码（或注册号)</label>
                                <input id="" name="enterpriseId" class="ui-input" type="text" placeholder=""
                                       value="" autocomplete="off">
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                            <div class="ui-form-item">
                                <label class="ui-label">住所</label>
                                <input id="" name="address" class="ui-input" type="text" placeholder=""
                                       value="" autocomplete="off">
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                            <div class="maincenter-box-tip dashed">
                                <p class="ui-tiptext ui-tiptext-message">企业营业执照
                                </p>
                            </div>
                            <div><span class="ft-12 grey">上传单位证件照片 企业营业执照</span></div>
                            <div class="ui-form-item">
                                <label class="ui-label"></label>
                                <input type="file" name="enterpriseImg" id="enterpriseImg" class="hidden">
                                <a href="#" class="btn-upload inline-block">
                                    <span>添加</span>
                                    <img src="" width="100" height="100">
                                </a>
                                <div class="inline-block">
                                    <ul class="ace-thumbnails">
                                        <li>
                                            <div>
                                                <img width="95" height="95" alt="100x100"
                                                     src="../../assets/images/gallery/thumb-5.jpg">
                                                <div class="text">
                                                    <div class="inner">
                                                        <a href="../../assets/images/gallery/image-5.jpg"
                                                           data-rel="colorbox">
                                                            <i class="ace-icon fa fa-search-plus"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="ui-form-explain-not-input"><i class="fa fa-times-circle ui-form-icon"
                                                                          aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="step-pane" data-step="3">
                        <div class="text-center" style="padding-top: 50px">
                            <p class="ui-tiptext ui-tiptext-message">设置成功，请牢记新的登录密码</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashed"></div>
            <div class="wizard-actions" style="text-align: left">
                <div class="ui-form-item ui-form-item-last">
                    <div class="ui-button ui-button-morange" id="J-submit-btn">
                        <input type="button" id="nextBtn" value="下一步" class="ui-button-text btn-next">
                        <input type="button" id="submitBtn" value="提交信息" class="ui-button-text fn-hide">
                    </div>
                </div>
            </div>
        </div>
        <div class="maincenter authFeatures" style="position: relative">
            <hr>
            <div class="featuresTitle">
                为什么进行企业实名认证
            </div>
            <div class="row">
                <div class="col-md-2 col-md-offset-3">
                    <div class="feature">
                    </div>
                    <p>核实真实信息</p>
                </div>
                <div class="col-md-2">
                    <div class="feature">
                    </div>
                    <p>保障帐户安全</p>
                </div>
                <div class="col-md-2">
                    <div class="feature">
                    </div>
                    <p>扩展更多功能</p>
                </div>

            </div>
        </div>
    </div>
    <!-- /.widget-main -->

    <!-- /.widget-body -->
</div>
<div class="footer">
    <div class="footer-inner">
        <div class="footer-content">
            沪ICP备15052275号-2
        </div>
    </div>
</div>
<script type="text/javascript" src="../../assets/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../assets/js/bootstrap.min.js"></script>
<!--page specific plugin scripts-->
<script type="text/javascript" src="../../assets/js/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="../../assets/js/wizard.min.js"></script>
<script type="text/javascript" src="../../assets/js/jquery.validate.min.js"></script>
<!-- ace scripts -->
<script type="text/javascript" src="../../assets/js/ace-elements.min.js"></script>
<script type="text/javascript" src="../../assets/js/ace.min.js"></script>
<script type="text/javascript" src="../../assets/js/distpicker.js"></script>
<script type="text/javascript" src="../../assets/javascripts/app.js"></script>
</body>
<script>
    jQuery(function ($) {
        $("#submitBtn").click(function () {
            window.location = '../index.html';
        });
        var $validation = true;
        //初始化对象
        $('#fuelux-wizard-container').ace_wizard({/*step: 2, direction: 'next'*/})
            .on('actionclicked.fu.wizard', function (e, info) {
                if (info.step == 1 && $validation) {
                    if (!$('#shopInfo').valid()) e.preventDefault();
                } else if (info.step == 2 && $validation) {
                    if (!$('#authentication').valid()) e.preventDefault();
                }
            }).on('changed.fu.wizard', function (e, data) {
            if (data.step == 2) {
                $("#nextBtn").parents(".ui-form-item").addClass("modifyPadding");
                $("#nextBtn").hide().siblings().show();
            }
            //重新选择验证方式隐藏
            $(".ui-form-other").hide();
        })
            .on('finished.fu.wizard', function (e) {

            }).on('stepclick.fu.wizard', function (e) {
            //e.preventDefault();//this will prevent clicking and selecting steps
        });

        //表单用户信息验证
        $("#shopInfo").validate({
            ignore: [],
            errorClass: 'red',
            /*onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                if (element.is('select')) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element.parents(".ui-form-item").find("i"));
                }
            },
            rules: {
                shopId: {
                    required: true
                },
                shopImg: {
                    required: true
                },
                province: {
                    required: true
                },
                city: {
                    required: true
                },
                district: {
                    required: true
                },
                address: {
                    required: true
                }
            },
            messages: {
                shopId: {
                    required: "请填写店铺名称"
                },
                shopImg: {
                    required: "请选择图片",
                },
                province: {
                    required: "请选择省,",
                },
                city: {
                    required: "请选择市,",

                },
                district: {
                    required: "请选择区",
                },
                address: {
                    required: "请填写店铺地址"
                }
            },
            highlight: function (e) {
                if (!$(e).is('select')) {
                    $(e).closest('.ui-form-item').addClass('ui-form-item-error');
                }

            },
            success: function (e) {
                console.log($(e));
                if ($(e).attr('id') != ("selProvince-error" || "selCity-error" || "selDistrict-error")) {
                    $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
                }


            },
            submitHandler: function (form) {

            },
            invalidHandler: function (form) {
            }
        });
        $("#authentication").validate({
            /*onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.parents(".ui-form-item").find("i"));
            },
            rules: {
                enterpriseName: {
                    required: true
                },
                enterpriseId: {
                    required: true
                },
                address: {
                    required: true
                },
                enterpriseImg: {
                    required: true
                }
            },
            messages: {
                enterpriseName: {
                    required: "请输入企业名称"
                }
                ,
                enterpriseId: {
                    required: "请输入社会信用代码（或注册号)"
                }
                ,
                address: {
                    required: "请输入住所"
                }
                ,
                enterpriseImg: {
                    required: "请选择证件照片"
                }
            }
            ,
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            }
            ,
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            }
            ,
            submitHandler: function (form) {

            }
            ,
            invalidHandler: function (form) {
            }
        })
        ;
    })
</script>
<script>
    $(function () {
        //省市区
        $('#distpicker1').distpicker();

        var $overflow = '';
        var colorbox_params = {
            rel: 'colorbox',
            reposition: true,
            scalePhotos: true,
            scrolling: false,
            previous: '<i class="ace-icon fa fa-arrow-left"></i>',
            next: '<i class="ace-icon fa fa-arrow-right"></i>',
            close: '&times;',
            current: '{current} of {total}',
            maxWidth: '100%',
            maxHeight: '100%',
            onOpen: function () {
                $overflow = document.body.style.overflow;
                document.body.style.overflow = 'hidden';
            },
            onClosed: function () {
                document.body.style.overflow = $overflow;
            },
            onComplete: function () {
                $.colorbox.resize();
            }
        };

        $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
    })
</script>

</html>